<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Git 工作流</title>
    <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
  </head>
  <body>

    <div class="wrapper">
      <!-- 头部导航 -->
      <div class="top-nav">
        <!-- 顶部左侧导航按钮 -->
        <div class="left-nav">
          <i class="close-window iconfont">&#xe64b;</i>
          <i class="small-window iconfont">&#xe641;</i>
        </div>
        <!-- 顶部右侧导航按钮 -->
        <div class="right-nav">
          <i class="system-window iconfont">&#xe751;</i>
        </div>
      </div>

      <!-- 功能导航 -->
      <div class="action-nav">
        <ul>
          <li>
            <i class="iconfont">&#xe759;</i>
            <span>Git</span>
          </li>

          <li class="active">
            <i class="iconfont">&#xe834;</i>
            <span>Git</span>
          </li>

          <li>
            <i class="iconfont">&#xe734;</i>
            <span>Git</span>
          </li>
        </ul>
      </div>
      <!-- 选择项目文件 -->
      <div class="choose-file" id="holder">
          <p>点击选择路径或者拖拽目录至此</p>
      </div>

      <!-- 项目目录列表 -->
      <div class="project-list">
<!--           <div class="list-item">
            <i class="iconfont">&#xe6f0;</i>
            <p>/user/index/app.html</p>
            <i class="iconfont">&#xe732;</i>
          </div>

          <div class="list-item">
            <i class="iconfont">&#xe6f1;</i>
            <p>/user/index/app.html</p>
            <i class="iconfont">&#xe732;</i>
          </div> -->
      </div>
      <!-- 功能操作 -->
      <div class="git-action">

        <div class="action-item">
          <button class="update">更新</button>
          <button class="merge">合并</button>
        </div>


        <div class="action-item">
          <button class="status">查看状态</button>
          <button class="add">新增</button>
          <button class="commit">提交</button>
        </div>

        <div class="commit-content">
          <div class="commit-txt">
            <label>提交说明:</label>
            <input type="text" />
            <i class="iconfont">&#xe6f8;</i>
          </div>
          <div class="commit-txt">
            <label>任务路径:</label>
            <input type="text" />
            <i class="iconfont">&#xe6f9;</i>
          </div>
        </div>




      </div>
      <!-- 可视化logo日志 -->
<!--       <div class="log">
        <i class="iconfont clear-log">&#xe732;</i>
      </div> -->
    </div>
    <script>window.$ = window.jQuery = require('jquery/dist/jquery.min.js');</script>
    <!-- // <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script>
    //   var holder = document.getElementById('holder');

    //   let exec = require('child_process').exec;

    //   document.getElementById("holder").addEventListener("click", function () {
    //     exec('ls /Users/6ceng', (err, stdout, stderr) => {
    //       if (err) {
    //         console.error(err);
    //         return;
    //       }
    //       console.log(stdout);
    //     });
    //   });

    //   // holder.ondragover = function () {
    //   //   return false;
    //   // };
    //   // holder.ondragleave = holder.ondragend = function () {
    //   //   return false;
    //   // };
    //   // holder.ondrop = function (e) {
    //   //   e.preventDefault();
    //   //   var file = e.dataTransfer.files[0];
    //   //   console.log('File you dragged here is', file.path);
    //   //   document.getElementById('sideba').innerHTML = "<span>"+file.path+"</span>"
    //   //   return false;
    //   // };
    </script>
  </body>
</html>